<template>
<div class="categories">
  <!-- 面包屑导航 -->
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>商品管理</el-breadcrumb-item>
    <el-breadcrumb-item>商品分类</el-breadcrumb-item>
  </el-breadcrumb>
  <!-- 卡片 -->
  <el-card>
    <!-- 添加分类按钮 -->
    <el-button class="addOpt" type="primary" @click="showAddDialog">添加分类</el-button>
    <!-- 列表展示 -->
    <tree-table :data="categories" :columns="columns" index-text="#" :show-row-hover="false" border :selection-type="false" show-index :expand-type="false">
      <!-- 作用域插槽，按需加载 -->
      <!-- 是否有效 -->
      <template slot="isOK" slot-scope="scope">
        <i class="el-icon-success" v-if="!scope.row.cat_deleted" style="color: lightgreen;"></i>
        <i class="el-icon-warning" v-else style="color: red;"></i>
      </template>
      <!-- 等级排序 -->
      <template slot="order" slot-scope="scope">
        <el-tag v-if="scope.row.cat_level === 0" size="mini">一级</el-tag>
        <el-tag v-else-if="scope.row.cat_level === 1" type="success" size="mini">二级</el-tag>
        <el-tag v-else type="danger" size="mini">三级</el-tag>
      </template>
      <!-- 操作 -->
      <template slot="option" slot-scope="scope">
        <el-button type="primary" icon="el-icon-edit" size="mini" @click="editCate(scope.row.cat_id)">编辑</el-button>
        <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteCateById(scope.row.cat_id)">删除</el-button>
      </template>
    </tree-table>

    <!-- 分页部分 -->
    <div class="block">
      <el-pagination @size-change="rePageSize" @current-change="onPageChange" :current-page="page.pagenum" :page-sizes="[5, 10, 20, 25]" :page-size="page.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="page.total">
      </el-pagination>
    </div>
  </el-card>

  <!-- 添加分类弹出框 -->
  <el-dialog title="添加商品分类" :visible.sync="addIsShow" width="80%" @close="closeAddDialog">
    <!-- 提交表单 -->
    <el-form :model="add" :rules="addRules" label-width="100px" class="demo-ruleForm" ref="addCateFrom">
      <el-form-item label="分类名称" prop="cat_name">
        <el-input v-model="add.cat_name"></el-input>
      </el-form-item>
      <el-form-item label="父级分类">
        <el-cascader expand-trigger="hover" :options="addFatherOrder" v-model="selectedOptions" @change="handleChange" :props="pro" clearable>
        </el-cascader>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="addIsShow = false">取 消</el-button>
      <el-button type="primary" @click="addCategories">确 定</el-button>
    </span>
  </el-dialog>

  <!-- 编辑分类弹出框 -->
  <el-dialog title="编辑商品分类" :visible.sync="editIsShow" width="80%">
    <el-form :model="editData" :rules="addRules" label-width="100px" class="demo-ruleForm" ref="editCateFrom">
      <el-form-item label="分类名称" prop="cat_name">
        <el-input v-model="editData.cat_name"></el-input>
      </el-form-item>
      <el-form-item label="父级分类">
        <el-cascader expand-trigger="hover" :options="editFatherOrder" v-model="selectedOptions" @change="editCaseChange" :props="pro" clearable>
        </el-cascader>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="editIsShow = false">取 消</el-button>
      <el-button type="primary" @click="submitEdit(editId)">确 认</el-button>
    </span>
  </el-dialog>
</div>
</template>

<script>
export default {
  data: function () {
    return {
      // 页面商品分类数据
      categories: [],
      page: {
        // type: [1, 2, 3],
        // 当前页码值
        pagenum: 1,
        // 当前页显示数据
        pagesize: 10,
        // 总页数
        total: null
      },

      // 添加分类相关数据
      // 显示状态
      addIsShow: false,
      add: {
        // 父级分类，默认是0（一级）
        cat_pid: 0,
        // 分类名称
        cat_name: '',
        // 分类层级，`0`表示一级分类；`1`表示二级分类；`2`表示三级分类
        cat_level: 0
      },

      // 添加分类弹窗的父级分类
      addFatherOrder: [],
      // 级联选择器配置
      pro: {
        value: 'cat_id',
        label: 'cat_name',
        children: 'children',
        checkStrictly: true
      },

      // 切换的id数组
      selectedOptions: [],

      // 添加表单校验规则
      addRules: {
        cat_name: [
          { required: true, message: '请输入分类名称', trigger: 'blur' },
          { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
        ]
      },

      // 树形表格的列数据
      columns: [{
        label: '分类名称',
        prop: 'cat_name'
      }, {
        label: '是否有效',
        prop: 'cat_deleted',
        type: 'template',
        template: 'isOK'
      }, {
        label: '排序',
        type: 'template',
        template: 'order'
      }, {
        label: '操作',
        type: 'template',
        template: 'option'
      }],

      // 编辑商品分类相关属性
      editIsShow: false,

      // 编辑表单的数据
      editData: {
        // 父级分类，默认是0（一级）
        cat_pid: 0,
        // 分类名称
        cat_name: '',
        // 分类层级，`0`表示一级分类；`1`表示二级分类；`2`表示三级分类
        cat_level: 0
      },
      // 编辑的id
      editId: null,

      // 编辑的商品分类的详细类别
      editFatherOrder: []
    }
  },
  methods: {
    // 获取页面列表数据
    getCategoriesList: async function () {
      // 发送请求
      const {
        data: {
          data,
          meta
        }
      } = await this.$http.get('categories', {
        params: {
          pagenum: this.page.pagenum,
          pagesize: this.page.pagesize
        }
      })
      // 判断后端响应状态
      if (meta.status !== 200) {
        return this.$message.error('分类数据加载失败！')
      } else {
        // 响应成功后加载数据
        this.categories = data.result
        // 前后端页码规定不一致，故使用前端页码
        // this.page.pagenum = data.pagenum
        this.page.pagesize = data.pagesize
        this.page.total = data.total
      }
    },

    // 页面显示内容大小发生改变触发
    rePageSize: function (val) {
      // 更新页面容量
      this.page.pagesize = val
      this.getCategoriesList()
    },

    // 页码发生变化触发的函数
    onPageChange: function (val) {
      // 更新页值
      this.page.pagenum = val
      this.getCategoriesList()
    },

    // 添加分类时获取父级分类信息
    async showAddDialog() {
      // 发送请求
      const {
        data: {
          data,
          meta
        }
      } = await this.$http.get('categories', {
        params: {
          type: [2],
          pagesize: this.page.pagesize,
          pagenum: this.page.pagenum
        }
      })
      if(meta.status === 200) {
        this.addFatherOrder = data.result
      }

      // 显示出添加的表单
      this.addIsShow = true
    },

    // 添加分类功能
    addCategories() {
      // 表单验证
      this.$refs.addCateFrom.validate(async valid => {
        if(!valid) return this.$message.error('表单验证失败')
        this.$message.success('表单验证通过')
        // 表单验证成功，发送修改请求
        const { data } = await this.$http.post('categories', this.add)
        console.log(data)
        if(data.meta.status === 201) {
          this.$message.success('添加成功')
          this.getCategoriesList()
          this.addIsShow = false
        } else {
          return false
        }
      })
    },

    // 添加选项改变
    handleChange(a) {
      if(a.length !== 0) {
        this.add.cat_pid = a[a.length - 1]
        this.add.cat_level = a.length
      } else {
        this.add.cat_pid = 0
        this.add.cat_level = 0
      }
    },

    // 关闭添加对话框，清空数据
    closeAddDialog() {
      // 清空输入框
      this.add.cat_name = ''
      // 清空级联选择
      this.selectedOptions = []
    },

    // 编辑功能 传递 id 并查询相应的数据
    async editCate(id) {
      this.editId = id
      // 发送请求，查询对应的ID的商品分类信息
      const { data } = await this.$http.get('categories/' + id)
      // 发送请求获取所有的分类信息
      const res = await this.$http.get('categories', {
        params: {
          type: [2],
          pagesize: this.page.pagesize,
          pagenum: this.page.pagenum
        }
      })

      // 判断对应的ID的商品分类信息的响应结果
      // 响应失败
      if(data.meta.status !== 200) return this.$message.error('获取信息失败')

      // 响应成功
      this.editData.cat_pid = data.data.cat_id
      this.editData.cat_name = data.data.cat_name
      this.editData.cat_level = data.data.cat_level
      this.selectedOptions = data.data.cat_pid
      // 判断分类信息的响应结果
      if(res.data.meta.status === 200) {
        // 结果赋值给 editFatherOrder
        console.log(res.data)
        this.editFatherOrder = res.data.data.result
      }
      // 显示编辑对话框
      this.editIsShow = true
    },

    // 级联发生变化
    editCaseChange(e) {
      console.log(e)
      if(e.length !== 0) {
        this.editData.cat_pid = e[e.length - 1]
        this.editData.cat_level = e.length
      } else {
        this.editData.cat_pid = 0
        this.editData.cat_level = 0
      }
    },

    // 提交修改
    submitEdit: function() {
      // 验证表单
      this.$refs.editCateFrom.validate(async valid => {
        if(!valid) return this.$message.error('表单验证失败')

        console.log(valid)
        // 发送更新请求
        const { data } = await this.$http.put('categories/' + this.editId, this.editData)

        // 判断响应状态
        if(data.meta.status !== 200) return this.$message.error('信息更新失败')

        this.$message.success('信息更新成功')
        // 隐藏对话框
        this.editIsShow = false
        this.editId = null
        this.editData.cat_pid = 0
        this.editData.cat_name = ''
        this.editData.cat_level = 0
        this.selectedOptions = []
        // 更新页面数据
        this.getCategoriesList()
      })
    },

    // 删除分类
    async deleteCateById(id) {
      const res = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      if(res === 'confirm') {
        const { data } = await this.$http.delete('categories/' + id)
        if(data.meta.status === 200) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          // 更新页面数据
          this.getCategoriesList()
        } else {
          this.message.error('删除失败')
        }
      }
    }
  },
  created() {
    // 创建完成加载页面数据
    this.getCategoriesList()
  }
}
</script>

<style lang="less" scoped>
.block {
  margin-top: 20px;
}

// 按钮下边的间距
.addOpt {
  margin-bottom: 15px;
}
.el-cascader {
  width: 100%;
}
</style>
